<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-row v-show="showSearch">
				<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
<!--					<el-form-item label="流程状态" prop="approvalState">-->
<!--						<el-select style="width: 8em" v-model="state.queryForm.approvalState" placeholder="请选择流程状态">-->
<!--							<el-option :label="item.label" :value="item.value" v-for="(item, index) in flow_state" :key="index"></el-option>-->
<!--						</el-select>-->
<!--					</el-form-item>-->
					<el-form-item label="任务开始时间" prop="startTime">
						<el-date-picker
							:end-placeholder="$t('syslog.inputEndPlaceholderTip')"
							:start-placeholder="$t('syslog.inputStartPlaceholderTip')"
							range-separator="To"
							type="datetimerange"
							v-model="state.queryForm.startTime"
							value-format="YYYY-MM-DD HH:mm:ss"
						/>
					</el-form-item>
					<!--      <el-form-item label="实体id" prop="entityId" >-->
					<!--        <el-input placeholder="请输入实体id" v-model="state.queryForm.entityId" />-->
					<!--      </el-form-item>-->
					<el-form-item>
						<el-button icon="search" type="primary" @click="getDataList"> 查 询</el-button>
						<el-button icon="Refresh" @click="resetQuery">重 置</el-button>
					</el-form-item>
				</el-form>
			</el-row>
			<el-table
				:data="state.dataList"
				v-loading="state.loading"
				border
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle.headerCellStyle"
				@selection-change="selectionChangHandle"
				@sort-change="sortChangeHandle"
			>
				<el-table-column type="selection" width="40" align="center" />
				<el-table-column type="index" label="#" width="100" />
				<el-table-column label="标题" show-overflow-tooltip>
					<template #default="scope">
						{{ scope.row.startUser ? scope.row.startUser.name + '的' + scope.row.title : scope.row.title }}
					</template>
				</el-table-column>
				<el-table-column label="发起人" prop="startUser.name"></el-table-column>
				<el-table-column label="发起人所属部门" prop="startUser.deptName"></el-table-column>
				<el-table-column label="所属实体" prop="entity.name"></el-table-column>
				<el-table-column label="审批节点" prop="approvalNodeName"></el-table-column>
				<el-table-column prop="startTime" label="开始时间" show-overflow-tooltip />
				<el-table-column label="操作" width="150">
					<template #default="scope">
						<el-button
							icon="edit-pen"
							text
							type="primary"
							@click="flowDetailsDialogRef.openDialog(scope.row.processInstanceId, scope.row.entity.formJson, scope.row.variables,scope.row.taskId)"
						>
							审批
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
		</div>
		<flow-details ref="flowDetailsDialogRef" @refresh="getDataList(false)" />
	</div>
</template>

<script setup lang="ts" name="systemActFlowExtended">
import { BasicTableProps, useTable } from '/@/hooks/table';
import { fetchMyApprovalList } from '/@/api/flow/flow';

const FlowDetails = defineAsyncComponent(() => import('./flowDetails.vue'));
// 定义查询字典

// 定义变量内容
const flowDetailsDialogRef = ref();

// 搜索变量
const queryRef = ref();
const showSearch = ref(true);
// 多选变量
const selectObjs = ref([]) as any;
const multiple = ref(true);

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {},
	pageList: fetchMyApprovalList,
});

//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, sortChangeHandle, downBlobFile, tableStyle } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
	// 清空搜索条件
	queryRef.value?.resetFields();
	// 清空多选
	selectObjs.value = [];
	getDataList();
};

// 多选事件
const selectionChangHandle = (objs: { processDefinitionId: string }[]) => {
	selectObjs.value = objs.map(({ processDefinitionId }) => processDefinitionId);
	multiple.value = !objs.length;
};
</script>
